<template>
  <div>
    <div class="section ivu-row">
      <database :inline="true" :dbIndex="$route.params.dbIndex" :schema="$route.params.schema" @schemaChanged="OnSchemaChanged" />
      <Col :span="8" style="text-align: right;">
        <ButtonGroup shape="circle">
          <Button :type="showType == 'Columns' ? 'primary' : 'default'" icon="md-apps" @click.native="OnChangeTableDetail('Columns')">字段</Button>
          <Button :type="showType == 'Datas' ? 'primary' : 'default'" icon="md-archive" @click.native="OnChangeTableDetail('Datas')">数据</Button>
          <Button :type="showType == 'DDL' ? 'primary' : 'default'" icon="md-code" @click.native="OnChangeTableDetail('DDL')">脚本</Button>
          <Button :type="showType == 'DML' ? 'primary' : 'default'" icon="md-code-download" @click.native="OnChangeTableDetail('DML')">DML语句</Button>
          <Button :type="showType == 'Entity' ? 'primary' : 'default'" icon="md-code-working" @click.native="OnChangeTableDetail('Entity')">实体</Button>
        </ButtonGroup>
      </Col>
    </div>
    <Row :gutter="10">
      <Col span="6">
        <panel type="primary" :enableToggle="false">
          <template slot="title">
            <Icon type="md-information-circle" size="24" />
            <span style="margin-left: 6px;">表信息列表</span>
            <span style="font-weight: normal;font-size: 12px;">（共计：{{ totalTables }} 张表，呈现{{ filteredTables }}张表）</span>
          </template>
          <tables :dbIndex="dbIndex" :schema="schema" :tableListStyle="{ 'height': tablePanelMaxHeight + 'px' }" @tablesLoaded="OnTablesLoaded" @change="OnSelectedTableChanged" />
        </panel>
      </Col>
      <Col span="18">
        <div class="detail" :style="{ 'height': detailPanelMaxHeight + 'px', 'max-height': detailPanelMaxHeight + 'px' }">
          <router-view />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  components: {
    tables: () => import('./components/Tables.vue'),
    database: () => import('./components/Database.vue')
  },
  data() {
    return {
      showType: 'Columns',
      totalTables: 0,
      filteredTables: 0,
      currentTable: {},
      dbIndex: 0,
      schema: '',
      dbType: '',
      tablePanelMaxHeight: 520,
      detailPanelMaxHeight: 560
    };
  },
  methods: {
    OnTablesLoaded(count) {
      this.totalTables = count;
    },
    OnSelectedTableChanged(item) {
      if (item) {
        var self = this;
        this.currentTable = item;
        this.filteredTables = item.totalTables;

        this.$router.push({
          name: this.showType,
          params: {
            dbIndex: self.dbIndex,
            schema: self.schema,
            tableName: item.table_name
          },
          query: {
            dbtype: self.dbType,
            comment: this.currentTable.table_comment
          }
        });
      } else {
        this.currentTable = {};
      }
    },
    OnSchemaChanged(item) {
      const self = this;

      this.showType = 'Columns';
      this.dbIndex = item.dbIndex;
      this.schema = item.schema;
      this.dbType = item.type;

      this.$router.replace({
        name: 'DbDetail',
        params: {
          dbIndex: self.dbIndex,
          schema: self.currentSchema
        },
        query: {
          dbtype: self.dbType,
          comment: this.currentTable.table_comment
        }
      });

      this.OnSelectedTableChanged(this.currentTable);
    },
    OnChangeTableDetail(category) {
      const self = this;

      let path = {
        name: category,
        params: {
          dbIndex: this.$route.params.dbIndex,
          schema: this.$route.params.schema,
          tableName: this.currentTable.table_name
        },
        query: {
          dbtype: self.dbType,
          comment: this.currentTable.table_comment
        }
      };

      this.showType = category;

      this.$router.push(path);
    },
    ResizeDetailPanel(area) {
      this.tablePanelMaxHeight = area.height - 145;
      this.detailPanelMaxHeight = area.height - 60;

      this.$store.commit('changeTableDetailHeight', this.detailPanelMaxHeight);
    }
  },
  mounted() {
    let area = this.getClientArea();

    this.ResizeDetailPanel(area);
    this.$bus.on('windowResizeChanged', client => this.ResizeDetailPanel(client));
  }
};
</script>

<style lang="less">
.detail {
  margin-top: 0;
  background: #fff;
  padding: 5px 5px;
  border-radius: 5px;
  overflow: auto;
}
</style>
